import React, { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import './index.less';

// 发票记录 mock 数据
const invoiceData = [
  {
    invoice_id: 'INV001',
    date: '2024-01-15',
    amount: '¥1,200.00',
    status: '已开票',
  },
  {
    invoice_id: 'INV002',
    date: '2024-02-20',
    amount: '¥800.00',
    status: '待审核',
  },
  {
    invoice_id: 'INV003',
    date: '2024-03-05',
    amount: '¥2,500.00',
    status: '已寄出',
  },
  {
    invoice_id: 'INV004',
    date: '2024-04-10',
    amount: '¥450.00',
    status: '作废',
  },
];

function InvoiceRecord() {
  // 使用 useState 来存储发票数据
  const [invoices, setInvoices] = useState(invoiceData);

  // 使用 useEffect 来模拟异步加载数据
  useEffect(() => {
    // 模拟异步请求，例如从 API 获取数据
    // 这里我们直接设置状态为 mock 数据
    setInvoices(invoiceData);
  }, []); // 空依赖数组表示这个 effect 只在组件挂载时运行一次

  return (
    <View className="invoice-record">
      {invoices.map((invoice, index) => (
        <View key={index} className="invoice-item">
          <View className="invoice-item-id">发票编号：{invoice.invoice_id}</View>
          <View className="invoice-item-date">开票日期：{invoice.date}</View>
          <View className="invoice-item-amount">金额：{invoice.amount}</View>
          <View className="invoice-item-status">状态：{invoice.status}</View>
        </View>
      ))}
    </View>
  );
}

export default InvoiceRecord;